<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>折叠组标记 Collapsible set markup-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/formats/style/jqmapi.js" type="text/javascript"></script><hr style="color:#595959;" />
<div class="content">
<h1>折叠组标记 Collapsible set markup</h1>

				<div class="desc">
    <div>折叠组的标记和单个的折叠区域的标记的开头是一样的。将若干可折叠区域用一个容器包裹，再给此容器增加<strong>data-role="collapsible-set" </strong>属性，框架会自动将这些可折叠的部件组合成为一个视觉上成组的部件，使他们看上去像手风琴，并且在同一个时间只会有一个容器是展开的。</div></div>
	<div class="desc">
				  <div>默认情况下，手风琴中所有的部件都是收缩起来的。。如果想设置某个部件是打开的，可以给这个部件的标题容器添加<strong>data-collapsed="false"</strong>属性。</div></div>
				<div class="code">
				  <pre> <strong>&lt;div data-role="collapsible-set"&gt;</strong>
		&lt;div data-role="collapsible" <strong>data-collapsed="false"</strong>&gt;
		&lt;h3&gt;Section 1&lt;/h3&gt;
		&lt;p&gt;I'm the collapsible set content for section B.&lt;/p&gt;
		&lt;/div&gt;  	  	

		&lt;div data-role="collapsible"&gt; 
		&lt;h3&gt;Section 2&lt;/h3&gt;
		&lt;p&gt;I'm the collapsible set content for section B.&lt;/p&gt;
		&lt;/div&gt;
<strong>&lt;/div&gt;</strong>  	</pre>
      </div><div class="desc">
				  <div>如上所示：默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩</div></div>          
<img src="../../images/Collapsible content_2.png" tppabs="http://www.jqmapi.com/images/Collapsible content_2.png">
<h1>给折叠组主题样式 Theming collapsible content</h1>

      <div class="desc">
				  <div>普通的<strong>data-theme属性</strong>可以加在手风琴组上来设定主题样式。如果想让手风琴组的标题单独设计主题样式，可以添加<strong>data-content-theme</strong>属性。</div></div>
				<div class="code">
				  <pre>&lt;div data-role="collapsible-set"<strong> data-theme="c" data-content-theme="d"</strong>&gt;</pre>
      </div> 
<h1>给每个折叠部件主题样式 Theming individual sections</h1>

      <div class="desc">
				  <div>如果想给组内的每个部件不同的主题样式，可以给每个部件单独添加<strong>data-theme</strong> 和<strong>data-content-theme </strong>。</div></div>
<img src="../../images/Collapsible content_4.png" tppabs="http://www.jqmapi.com/images/Collapsible%20content_4.png">
</div>
</div>

</body>
</html>



